<template>
	<view>
		<view class="input location" type="text" placeholder="请选择省市区">
			<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
				@change="pickerChange" @columnchange="pickerColumnchange">
				<!-- <view>{{provinceDataList[0].name}}--{{provinceDataList[0].city[0].name}}--{{provinceDataList[0].city[0].area[0]}}</view> -->
				<view class="">{{select}}</view>
			</picker>
		</view>
		<view class="location" style="margin-top: 0px;">
			<input type="text" maxlength="26" v-model="detailAddress" placeholder="请输入详情地址" style="width: 100%;" />
			<!-- placeholder-class="placeholder" -->
		</view>
		<!-- <view class="btns" style="margin-top: 30px;display: flex;justify-content: center;" @click="handleSure">确定</view> -->
		<view class="into into1">
			<view class="save" style="background-color:#3c8eff;" @click="handleSure">确定</view>
		</view>
	</view>
</template>

<script>
	import * as provinceData from './city.js';
	import {
		queryLocationByAddress
	} from "@/apis/index/index.js";
	import {
		debounce
	} from '@/common/js/throttle.js'
	export default {
		data() {
			return {
				detailAddress: '',
				oldpProvinceDataList: provinceData.data,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '选择省市区',

				addressData: {
					name: '',
					phone: '',
					address: ''
				},
				binhao: '1',
				// 入口是哪
				type: '',
			}
		},
		onLoad(options) {
			if (options.type) {
				console.log('options.type00000', options.type)
				this.type = options.type;
			} else {
				this.type = ''
			}
			// console.log(this.oldpProvinceDataList);
			for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
				// console.log(this.oldpProvinceDataList[i].name);
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city.length; i++) {
				// console.log(this.oldpProvinceDataList[0].city[i].name)
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city[0].area.length; i++) {
				// console.log(this.oldpProvinceDataList[0].city[0].area)
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
			}
			// console.log(this.newProvinceDataList)
		},
		methods: {
			handleSure: debounce( function() {
					// 必填校验
					if (this.select == '选择省市区') {
						uni.showToast({
							title: this.select,
							icon: 'error'
						})
						return
					}
					if (!this.detailAddress) {
						uni.showToast({
							title: '请输入详细地址',
							icon: 'error'
						})
						return
					}
					// debugger
					let city = this.newProvinceDataList[1][this.multiIndex[1]]
					let str =
						`${this.newProvinceDataList[0][this.multiIndex[0]]}${this.newProvinceDataList[1][this.multiIndex[1]]}${this.newProvinceDataList[2][this.multiIndex[2]]}`
					let address = str + this.detailAddress
					queryLocationByAddress({
						address
					}).then(res => {
						if (!res.success) {
							uni.showToast({
								title: '地址信息有误，请重新输入',
								icon: 'error'
							})
							return
						}
						let location = res.object.location.split(',')
						if (this.type) {
							// 我的
							console.log('----a------a-----', address)
							this.$store.commit('setMyAddress', address)
							uni.$emit(this.type, {
								my: address,
								city: city,
								myaddress: address
							});

							if (this.type == 'departAddress') {
								uni.navigateBack()
							} else {
								uni.navigateBack({
									delta: 2
								})
							}

						} else {
							// 首页
							this.$store.commit('setLatitude', location[1])
							this.$store.commit('setLongitude', location[0])
							this.$store.commit('setCity', city)
							this.$store.commit('setAddress', address)
							this.$store.commit('setDetailAddress', address)
							uni.switchTab({
								url: "../../tabbars/index/index",
							});
						}
					})
			},2000,true),
			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// console.log(this.multiIndex);
				// 获取省
				// console.log(this.newProvinceDataList[0][this.multiIndex[0]])
				// 获取市
				// console.log(this.newProvinceDataList[1][this.multiIndex[1]])
				// 获取区
				// console.log(this.newProvinceDataList[2][this.multiIndex[2]])
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]]}--${this.newProvinceDataList[1][this.multiIndex[1]]}--${this.newProvinceDataList[2][this.multiIndex[2]]}`
			},
			pickerColumnchange(e) {
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
						// console.log(item)
						return item.name
					})
					// console.log(this.multiIndex)
					if (this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,
							index) => {
							// console.log(item)
							return item
						})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[
							1]].area.map((item, index) => {
							// console.log(item)
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
						.area.map((item, index) => {
							// console.log(item)
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
					// console.log('第三列滑动')
					// console.log(this.multiIndex)
				}
			}

		}
	}
</script>

<style lang="less" scoped>
	.pickerList {
		height: 50%;
		width: 100%;
	}

	.location {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		margin: 0 40rpx;
		font-size: 30rpx;
		color: #666;
		border-bottom: solid 1rpx rgba(0, 0, 0, 0.1);
		font-weight: 400;
		box-sizing: border-box;

		input {
			width: 100%;
			color: #666;
		}
	}

	.inputs {
		// height: 50rpx;
		// .uni-input-input{
		// 	height: 70rpx!important;
		// 	line-height: 50rpx;
		// }
	}

	.into1 {
		margin-top: 190rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.into {
		width: 100%;
		height: 144rpx;
		background: rgba(216, 216, 216, 0);
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 42rpx;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);

		&.myinto {
			justify-content: flex-start;
		}

		.save {
			width: 698rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			background: #3c8eff;
			border-radius: 8rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>